<template>
  <van-tabs
    @change="changeTab"
    :swipe-threshold="3"
    scrollspy
    v-model:active="active"
    type="card"
  >
    <van-tab v-for="(item, i) in tabList" :key="i" :title="item"></van-tab>
  </van-tabs>
</template>

<script setup>
import { ref, reactive } from 'vue'

const emit = defineEmits(['change'])
const props = defineProps({
  tabList: {
    type: Array,
    default: () => {
      return ['标题1', '标题2', '标题3']
    }
  }
})

const changeTab = val => {
  emit('change', val)
}

const active = ref(0)
</script>
<style lang="less" scoped>
:deep(.van-tab--card) {
  background-color: #e8f2fe;
  color: #000000;
  padding: 0 60px;
  // border-right: 1px dashed #b2b2b2;
}
:deep(.van-tab--card.van-tab--active) {
  background-color: #2588ff;
  color: #fff;
}
:deep(.van-tab--card:nth-child(1)),
:deep(.van-tab--card:nth-child(2)) {
  //   border-right: none;
  //   border-right: 1px dashed #b2b2b2;
  //   span {
  //     display: flex;
  //     width: 100%;
  //     justify-content: center;
  //     height: 100%;
  //     padding: 0;
  //     border-right: 1px dashed #b2b2b2;
  //   }
}
:deep(.van-tab--card:first-child) {
  // border-radius: 6px 0 0 6px;
}
:deep(.van-tab--card:last-child) {
  // border-right: none;
  // border-radius: 0 6px 6px 0;
}
:deep(.van-tabs__nav--card) {
  // border: none;
}
</style>
